// @ts-nocheck
import React, { Component } from 'react';

// 引入store
import store from '../../redux/store'
// 引入action用于创建action对象
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from '../../redux/count_action'

class Count extends Component {

  // 检测状态变化 重新渲染，在入口文件中设置
  // componentDidMount () {
  //   store.subscribe (() => {
  //     this.setState ({})
  //   })
  // }

  increment = () => {
    // console.log (this.selectNum)
    const {value} = this.selectNum
    store.dispatch (createIncrementAction (value*1))
  }

  decrement = () => {
    const {value} = this.selectNum
    store.dispatch (createDecrementAction (value*1))
  }

  incrementIfOdd = () => {
    const {value} = this.selectNum
    const count = store.getState()
    if (count%2 !== 0) {
      store.dispatch (createIncrementAction (value*1))
    }
  }

  incrementAsync = () => {
    const {value} = this.selectNum
    // setTimeout (() => {
    //   store.dispatch (createIncrementAction (value*1))
    // }, 2000)
    store.dispatch (createIncrementAsyncAction (value*1, 2000))
  }

  render() {
    return (
      <div>
        <h1>求和为： {store.getState()}</h1>
        <select  ref={c => this.selectNum = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select> &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>和为奇数 +</button>&nbsp;
        <button onClick={this.incrementAsync}>异步 +</button>&nbsp;
      </div>
    );
  }
}

export default Count;
